<template>
  <div id="grandfather">
    顶级组件 -- 祖父级别 --- 信息：{{ name }} -- {{ age }} -- {{ gender }}
    <son />
  </div>
</template>

<script>
import {
  setup,
  provide,
  reactive,
  toRefs,
  onMounted,
  onUnmounted,
  ref,
} from "vue";

import Son from "./Son.vue";

export default {
  components: { Son },
  setup() {
    const info = reactive({
      name: "male",
      age: 18,
      gender: "mal",
    });
    let name = ref("male---");
    provide("info", info);
    provide("name", name);

    // let timer;
    // onMounted(() => {
    //   timer = setTimeout(() => {
    //     console.log("定时器触发");
    //     info.age += 1;
    //   }, 5000);
    // });

    // onUnmounted(() => {
    //   clearTimeout(timer);
    // });

    return {
      info,
      ...toRefs(info),
    };
  },
};
</script>

<style scoped>
#grandfather {
  background: pink;
  padding: 20px;
}
</style>
